<template>
  <div class="news_container">
    <!--  <div
      class="news_banner"
      v-if="useWidth.width.value > 750"
      :style="{
        background: 'url(' + new_background.imageUrl + ')  no-repeat center',
      }"
    >
      <div
        class="news_banner_title"
        :style="{
          width: settingStore.publicWidth,
        }"
      >
        新闻公告
      </div>
    </div>
    <div
      class="news_banner"
      v-if="useWidth.width.value <= 750"
      :style="{
        background: 'url(' + new_background.imagePhone + ')  no-repeat center',
      }"
    >
      <div
        class="news_banner_title"
        :style="{
          width: settingStore.publicWidth,
        }"
      >
        新闻公告
      </div>
    </div> -->
    <div class="news_list">
      <!--      <div class="news_list_tabs_box">
        <div
          class="news_list_tabs"
          :style="{
            width: settingStore.publicWidth,
          }"
        >
          <div
            :class="
              newsTabsActive === index
                ? 'news_list_tabs_item news_list_tabs_item_active'
                : 'news_list_tabs_item'
            "
            v-for="(item, index) in newsTabs"
            :key="index + 'newsTabs'"
            @click="handNewsTabsClick(index)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>-->
      <div
        class="news_list_content"
        :style="{
          width: settingStore.publicWidth,
        }"
      >
        <div class="news_list_content_breadcrumb">
          <t-breadcrumb>
            <t-breadcrumb-item to="/dashboard/base"> 首页 </t-breadcrumb-item>
            <t-breadcrumb-item
              :to="{ path: '/news', query: { active: newsTabsActive } }"
              >新闻公告</t-breadcrumb-item
            >
            <t-breadcrumb-item
              :to="{ path: '/news', query: { active: newsTabsActive } }"
              >{{ newsTabs[newsTabsActive].name }}</t-breadcrumb-item
            >
            <t-breadcrumb-item>详情</t-breadcrumb-item>
          </t-breadcrumb>
        </div>
        <div class="news_list_content_title">
          <h2>
            {{ newsTabs[newsTabsActive].name }}
          </h2>
          <h4>{{ newsTabs[newsTabsActive].en }}</h4>
          <img src="@/assets/news-fh.png" alt="" />
        </div>
        <div class="news_list_item">
          <div class="news_list_itemleft">
            <div
              :class="
                newsTabsActive === index
                  ? 'news_list_tabs_nav news_list_tabs_item_active'
                  : 'news_list_tabs_nav'
              "
              v-for="(item, index) in newsTabs"
              :key="index + 'newsTabs'"
              @click="handNewsTabsClick(index)"
            >
              <ArticleIcon />
              {{ item.name }}
            </div>
          </div>
          <div class="news_list_item_content">
            <h2>{{ newsData.title }}</h2>

            <div class="news_list_item_content_time">
              <TimeIcon /> 时间:<span>{{ newsData.publishTime }}发布</span>
              <span> 作者： </span>
              <span> 来源： </span>
            </div>
            <div class="news_list_item_content_content">
              <div v-html="newsData.content"></div>
            </div>
            <!--            <div class="news_list_item_content_bottom">
              <t-link @click="handNewsDetail('prev')"> <上一篇 </t-link>
              <t-link @click="handNewsDetail('mext')">下一篇> </t-link>
            </div>-->
            <div
              class="news_list_item_content_other"
              v-if="otherList.length > 0"
            >
              <div class="news_list_item_content_other_title">相关阅读</div>
              <div class="news_list_item_content_other_list">
                <div
                  class="news_list_item_content_other_list_item"
                  v-for="(item, index) in otherList"
                  :key="index + 'otherList'"
                >
                  <div class="news_list_item_content_other_list_item_title">
                    {{ item.title }}
                  </div>
                  <div class="news_list_item_content_other_list_item_time">
                    {{ item.time }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "ListBase",
};
</script>

<script setup lang="ts">
import { TimeIcon, ArticleIcon } from "tdesign-icons-vue-next";
import { ref, onMounted ,watch} from "vue";
import { useRouter, useRoute } from "vue-router";

import { useSettingStore } from "@/store";
import { backImage, detail } from "@/api";
import { useWindowResize } from "@/utils/useWindowResize";

const settingStore = useSettingStore();
const useWidth = useWindowResize();
const route = useRoute();
const newsTabsActive = ref(0);

// 局部引入
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import '@vueup/vue-quill/dist/vue-quill.bubble.css'
const newsTabs = ref([
  {
    name: "新闻资讯",
    value: 1,
    en: "News and Information",
  },
  {
    name: "通知公告",
    value: 2,
    en: "notice and Information",
  },
]);
const router = useRouter();
const handNewsTabsClick = (index: number) => {
  newsTabsActive.value = index;
  router.push({
    path: "/news",
    query: { active: index },
  });
};
const newsData = ref({
  title: "北京市政府党组成员隋振江一行莅临BGI参观调研",
  time: "2025-04-24 19:28:55",
  content: "",
});
const otherList = ref([
  /*  {
    title:
      "充分肯定BGI 在石墨烯领域的创新贡献在石墨烯领域的创新贡献在石墨烯领域的创新贡献,强调实现高水平...   ",
    time: "2025.04.04",
  }*/
]);
const getDetail = () => {
  detail({ id: route.query.id }).then((e) => {
    newsData.value = e;
  });
};
onMounted(() => {
  const active =
    typeof route.query.active === "string"
      ? parseInt(route.query.active, 10)
      : 0;
  newsTabsActive.value = isNaN(active) ? 0 : active;
  getDetail();
});
const handNewsDetail = (type: string) => {
  // 跳转详情
};

// 背景图片
const new_background = ref({ imagePhone: null, imageUrl: null });
backImage("new_background").then((e) => {
  new_background.value = e;
});
</script>

<style lang="less" scoped>
.news_container {
  width: 100%;
  .news_banner {
    width: 100%;
    height: 200px;
    background: url("@/assets/news-banner.png") no-repeat center;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .news_banner_title {
      font-family: Microsoft YaHei;
      font-weight: bold;
      font-size: 30px;
      color: #ffffff;
    }
  }
  .news_list {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .news_list_tabs_box {
      width: 100%;
      height: 100px;
      background: rgba(173, 33, 33, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      .news_list_tabs {
        height: 100%;
        display: flex;
        align-items: center;
        .news_list_tabs_item {
          font-family: Microsoft YaHei;
          font-weight: bold;
          font-size: 20px;
          margin-right: 120px;
          cursor: pointer;
          color: #333333;
        }
        .news_list_tabs_item_active {
          color: #ad2121;
        }
      }
    }
    .news_list_content {
      padding: 10px;
      .news_list_content_breadcrumb {
        display: flex;
        justify-content: flex-end;
      }
      .news_list_content_title {
        display: flex;
        align-items: center;
        font-family: Microsoft YaHei;
        margin-bottom: 45px;
        h2 {
          font-weight: 400;
          font-size: 30px;
          color: #333333;
        }
        h4 {
          font-weight: 300;
          font-size: 14px;
          color: #666666;
          margin: 0 10px;
          text-transform: uppercase;
        }
        /* img {
          width: 14px;
          height: 14px;
        } */
      }
      .news_list_item {
        width: 100%;
        display: flex;
        .news_list_itemleft {
          width: 20%;
          margin-right: 5%;
          -webkit-box-shadow: 2px 2px 10px #909090;
          box-shadow: 2px 2px 10px #909090;
          border-radius: 4px;
        }
        .news_list_itemleft {
          background: #f9f9f9;
          height: 300px;
        }
        .news_list_tabs_nav {
          width: 100%;
          font-size: f0f0f0;
          padding: 10px 0;
          font-size: 18px;
          padding-left: 20px;
          color: #666;
          border-bottom: 1px solid rgba(14, 80, 160, 0.3);
          box-sizing: border-box;
          &:hover {
            cursor: pointer;
          }
          &:last-of-type {
            margin-bottom: 0;
          }
        }
        .news_list_tabs_item_active {
          color: #ad2121;
        }
        .news_list_item_content {
          border: 1px solid #dcdcdc;
          -moz-box-shadow: 2px 2px 10px #909090;
          -webkit-box-shadow: 2px 2px 10px #909090;
          box-shadow: 2px 2px 10px #909090;
          padding: 30px;
          box-sizing: border-box;
          width: 75%;
          border-radius: 4px;
          h2 {
            font-family: Microsoft YaHei;
            font-weight: bold;
            font-size: 20px;
            color: #333333;
            text-align: center;
          }
          .news_list_item_content_time {
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 14px;
            color: #bbbbbb;
            padding: 24px 0;
            border-bottom: 1px solid rgba(14, 80, 160, 0.1);
            span {
              margin-left: 8px;
            }
          }
          .news_list_item_content_content {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 16px;
            color: #666666;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 30px;
            margin: 10px auto;
            :deep(p) {
              img {
                max-width: 90%;
                margin: 0 auto;
                display: block;
              }
              .ql-align-center{
                text-align: center !important;
              }
            }
            .ql-align-center{
              text-align: center !important;
            }
          }
          .news_list_item_content_bottom {
            margin: 48px 0;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            .t-link {
              margin-left: 60px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              font-size: 20px;
              color: #666666;
              &:last-child {
                color: #ad2121;
              }
            }
          }
          .news_list_item_content_other {
            width: 100%;
            .news_list_item_content_other_title {
              font-family: Microsoft YaHei;
              font-weight: bold;
              font-size: 20px;
              color: #ad2121;
            }
            .news_list_item_content_other_list {
              margin-top: 18px;
              width: 100%;
              display: flex;
              justify-content: space-between;
              flex-wrap: wrap;
              .news_list_item_content_other_list_item {
                width: 45%;
                margin-bottom: 25px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 16px;
                color: #333333;
                display: flex;
                align-items: center;
                justify-content: space-between;
                cursor: pointer;
                .news_list_item_content_other_list_item_title {
                  width: calc(100% - 100px);
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 1;
                  -webkit-box-orient: vertical;
                }
              }
            }
          }
        }
      }
    }
  }
}
@media screen and (max-width: 750px) {
  .news_list_itemleft {
    display: none;
  }
  .news_container
    .news_list
    .news_list_content
    .news_list_item
    .news_list_item_content {
    width: 100%;
    padding: 10px;
  }
  .news_container {
    .news_banner {
      height: 120px;
      .news_banner_title {
        font-size: 20px;
        padding-left: 30px;
      }
    }
    .news_list {
      .news_list_tabs_box {
        height: 60px;
        .news_list_tabs {
          width: 100% !important;
          padding: 10px;
          .news_list_tabs_item {
            font-size: 16px;
            margin-right: 30px;
            &:last-child {
              margin-right: 0;
            }
          }
        }
      }
      .news_list_content {
        width: 100% !important;
        .news_list_content_breadcrumb {
          justify-content: flex-start;
        }
        .news_list_content_title {
          margin-top: 20px;
          margin-bottom: 20px;
          justify-content: center;
          h2 {
            font-size: 20px;
          }
          h4 {
            font-size: 14px;
          }
        }
        .news_list_item {
          .news_list_item_content {
          }
        }
      }
    }
  }
}
</style>
